//main
import React, { useContext } from "react";
import { Link } from "react-router-dom";
import { connect } from "react-redux";
import { Typography } from "@material-ui/core";
import { ThemeProvider } from "@material-ui/core/styles";
//data
import Context from "../../Context";
//styles
import { useStyles } from "./Navbar.jss";

function ChatItem(props) {
  const { theme, currentChat, setCurrentChat } = useContext(Context);
  const classes = useStyles(theme);

  return Object.keys(props.chats)
    .filter((key) => props.chats[key].hash)
    .map((key, index) => {
      return (
        <Link
          to="/chat"
          style={{ textDecoration: "none", outlineStyle: "none" }}
          key={props.chats[key].hash}
          onClick={(e) => {
            setCurrentChat(props.chats[key].hash);
          }}
        >
          <ThemeProvider theme={theme}>
            <div
              className={
                props.chats[key].hash === currentChat
                  ? classes.chatItemPicked
                  : classes.chatItem
              }
            >
              <Typography noWrap className={classes.chatItemName}>
                {props.chats[key].hash}
              </Typography>
              <Typography noWrap className={classes.chatItemId}>
                {props.chats[key].hash}
              </Typography>
            </div>
          </ThemeProvider>
        </Link>
      );
    });
}

const mapStateToProps = (state) => {
  return {
    chats: state.chats,
  };
};

export default connect(mapStateToProps, null)(ChatItem);
